<template>
	<view class="" style="width: 100%;min-height: 100vh;">
		<cu-custom :isBack="true" :bgColor="'var(--primaryBg)'">

		</cu-custom>
		<view class="box">
			<view class="head">
				<view class="title-cont">
					<image src="../../../../static/service/cg.png" mode=""></image>
					<view class="">
						核销成功
					</view>
				</view>

				<view class="serve-record">
					<view class="record-name">
						服务记录
					</view>
					<view class="record-cont">
						<view class="record-list">
							<view class="record-item">
								<view class="title">
									{{item.name}}
								</view>
								<view class="form-box">
									<view class="form-item">
										<view class="label">
											服务商：
										</view>
										<view class="value">
											{{item.pId?item.pTeamName:item.teamName}}
										</view>
									</view>
									<view class="form-item">
										<view class="label">
											使用时间：
										</view>
										<view class="value">
											{{formattedDate}}
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>


				<view class="grow-record">
					<view class="grow-name">
						<image src="../../../../static/service/record.png" mode=""></image>
						顺手写一下档案吧！
					</view>
					<input v-model="form.title" type="text" :maxlength="30" placeholder="输入档案标题(必填)" class="input" />
					<view class="grow-cont">
						<ws-textarea v-model="form.content" :maxlength="200" placeholder="输入档案描述(必填)"></ws-textarea>
						<view class="num-box">
							{{form.content?form.content.length:0}}/200
						</view>
					</view>

				<!-- 	<view class='tabs'>
						<view class='tab-item' :class='{active: tabActive == item.value}' v-for='item in tabs'
							:key='item.value' @click='handleChagneTab(item)'>
							{{item.name}}
						</view>
					</view>
					<view class='pics'>
						<imgUpload v-if='tabActive == "image"' v-model='form.images' :limit='9'></imgUpload>
						<videoUpload v-else v-model='form.videos' :limit='1'></videoUpload>
					</view> -->
				</view>
				

			</view>
		</view>
		<view  class="bottom-box">
			<view @click.stop="toPage" class="">跳过</view>
			<view @click.stop="submit" class="">提交</view>
		</view>
	</view>
</template>

<script>
	import {pushFiles} from "@/api/pet/archive/base.js"
	import imgUpload from '@/pages/components/imgUpload/index'
	import videoUpload from '@/pages/components/videoUpload/index'
	export default {
		components: {
			imgUpload,
			videoUpload
		},
		data() {
			return {
				pet_team:{},
				form:{
					title:'',
					content:'',
					images:undefined,
					videos:undefined,
				},
				item: {},
				formattedDate: '',
				tabActive: 'image',
				tabs: [{
					name: '上传图片',
					value: 'image'
				}, {
					name: '上传视频',
					value: 'video'
				}],
			}
		},
		onLoad(option) {
			this.item = JSON.parse(decodeURIComponent(option.item));
			this.pet_team = uni.getStorageSync('pet_team')
			const now = new Date();
			const year = now.getFullYear();
			const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
			const day = String(now.getDate()).padStart(2, '0');
			const hours = String(now.getHours()).padStart(2, '0');
			const minutes = String(now.getMinutes()).padStart(2, '0');
			const seconds = String(now.getSeconds()).padStart(2, '0')
			this.formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		methods: {
			handleChagneTab(e) {
				if (this.tabActive == e.value) return;
				this.tabActive = e.value;
				this.form.pics = '';
			},
			submit(){
				if(!this.form.title){
					return uni.showToast({
						title:'请填写标题',
						icon:'none'
					})
				}
				if(!this.form.content){
					return uni.showToast({
						title:'请填写内容',
						icon:'none'
					})
				}
				pushFiles({
					...this.form,
					teamId:this.pet_team.teamId,
					cargoId:this.item.cargoId,
				}).then(res=>{
					uni.showToast({
						title:'操作成功',
						icon:'none'
					})
					setTimeout(()=>{
						this.toPage()
					},500)
				})
			},
			toPage(){
				uni.reLaunch({
					url: `/pages/index/index/index`
				});
			}
		},
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.bottom-box {
		position: fixed;
		left: 0;
		bottom: 46rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		view{
			width: 314rpx;
			background: var(--primaryBg);
			border-radius: 53rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #222222;
			line-height: 106rpx;
			text-align: center;
			&:first-child{
				background: #f8f8f8;
				border: 1rpx solid var(--primaryBg);
			}
		}
	}

	.grow-record {
		padding: 24rpx;
		margin: 16rpx;
		width: 718rpx;
		height: 578rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.grow-cont {
			margin-top: 16rpx;
			padding: 24rpx 28rpx;
			height: 331rpx;
			background: #F8F8F8;
			border-radius: 8rpx;

			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
			position: relative;

			.num-box {
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: var(--h4Color);
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
			}
		}

		.grow-name {
			image {
				margin-right: 11rpx;
				width: 26rpx;
				height: 26rpx;
			}

			font-family: PingFangSC,
			PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color:var(--h1Color);
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.input {
			margin-top: 16rpx;
			width: 100%;
			height: 90rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			padding: 0 28rpx;
		}

		.tabs {
			display: flex;
			align-items: center;

			.tab-item {
				width: max-content;
				height: 64rpx;
				padding: 0 24rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color:var(--h1Color);
				background: #F5F5F5;
				margin-right: 12rpx;

				&.active {
					background: var(--primaryBg);
				}
			}
		}

		.pics {
			margin-top: 40rpx;
			padding-bottom: 200rpx;
		}
	}

	.box {
		width: 100%;
		display: flex;
		flex-direction: column;
		.head {
			width: 100%;
			padding: 12rpx 0 58rpx;
			height: 376rpx;
			display: flex;
			background: linear-gradient(180deg,  var(--primaryBg) 0%, rgba(255, 227, 89, 0) 100%);
			display: flex;
			flex-direction: column;

			.serve-record {
				width: 718rpx;
				
				background: #FFFFFF;
				padding: 24rpx;
				margin: 72rpx 16rpx 0 16rpx;
				border-radius: 10rpx;

				.record-name {
					padding-bottom: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					border-bottom: 1rpx solid #EEEEEE;
				}

				.record-cont {
					.record-list {
						.record-item {
							.title {
								margin-bottom: 24rpx;
								margin-top: 28rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 600;
								font-size: 32rpx;
								color: var(--h1Color);
								line-height: 45rpx;
								text-align: left;
								font-style: normal;
							}
						}

						.form-box {
							.form-item {
								margin-bottom: 12rpx;
								display: flex;
								align-items: center;

								.label {
									width: 200rpx;
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}

								.value {
									font-family: PingFangSC, PingFang SC;
									font-weight: 400;
									font-size: 28rpx;
									color: var(--h2Color);
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
								}
							}
						}
					}
				}
			}

			.title-cont {
				width: 100%;
				margin-top: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 16rpx;
				}

				view {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: var(--h1Color);
					line-height: 56rpx;
					text-align: center;
					font-style: normal;
				}
			}
		}



	}
</style>